<!DOCTYPE html>
<html>
<head>
<title>vue-rescource 异步http请求</title>
<meta charset="UTF-8" />
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/jquery-1.11.2.js"></script>
<!--  <script src="js/jquery.cookie.js"></script> -->
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body style="padding:20px;">

<div id="app">
      <button v-on:click="myhttp">vue {{ messageGet }}</button>
      <button v-on:click="getlist">vue {{ messagePost }}</button>
        <button v-on:click="httpget">vue  {{ messageGets }}</button>
       <button v-on:click="httpky">vue  {{ messageJSONP }}</button>
        <button v-on:click="httpky2">vue  {{ messageCors }}</button>
         <button v-on:click="httpky3">JQ {{ messageJSONP }} </button>
           <button v-on:click="httpky4">JQ {{ messageCors }}</button>
      			<table class="table table-bordered">
			         <tr ><th  v-for="valueth in th" > {{valueth}} </th></tr>
				     <tr v-for="valuetr in td"> <!-- 根据ted的数组下的对象数 遍历tr的个数 这里遍历了3个tr 根据trd下的对象数遍历的 -->
				     		<td  v-for=" valuetd in valuetr">{{ valuetd }}</td> <!-- valuetr得到是一个对象 并且valuetr在trd的for循环下 因此可以 XXXX in valuetr继续下层遍历  -->
				     </tr>
				</table>
				
				<ul class="list-group">
				   <li class="list-group-item" v-for=" valueli in li" >{{ valueli }}</li>
				</ul>
				
				
</div>
<script>
 new Vue({
	el : "#app", 
    data :{
    	messageGets: "Get带参请求2",
    	messageGet: "Get请求",
    	messagePost : "Post请求",
    	messageJSONP : "JSONP跨域请求",
    	messageCors : "Cors跨域post请求",
	    th:[],     
		td : [],
		li: []
    },
    methods : {
    	myhttp: function(){
    		this.$http({
    			method:"get",
    			url : "vipjson.json"
    		}).then(function(response){  //成功的回调
    			//response.status 状态  response.statusText  文本 response.data数据
    			 for(var i in response.data.th){
    		        	this.th.push( response.data.th[i] ); /*将th列名从json获取 并添加到app4.th的数据里*/
    		        }
    		        for(var k  in response.data.td){
    		        	this.td.push( response.data.td[k] ); /*将th列名从json获取 并添加到app4.th的数据里*/
    		        }
    		},function(response){  //失败的回调
    			alert(response + "错误")
    		});
    	},
    	getlist :function(){
    		//Vue.http.options.emulateJSON = true; //全局开启 post方式必须开启cont-type
    		this.$http({
    			url : "getlist.php",  //发送地址
    			method: "post",  //发送方法
    			body: {   //发送参数 不带尾巴 适合post
    				"token" : "15819588170"
    			},
    			emulateJSON:true	  //局部开启 post方式必须开启cont-type
    		}).then(function(response){
    		    var jsondata  =  JSON.parse(response.data);  
    			for(var i = 0;i < jsondata.length; i++ ){
    				//this.td.push( response.data.td[k] );
    				this.li.push(jsondata[i]);
    			}
    		},function(response){
    			alert("2")
    		});
    	},
    	httpget:function(){
    		this.$http({
    			url : "getlist.php",  //发送地址
    			method: "get",  //发送方法
    			params: {   //发送参数 带尾巴 适合 get jsonp
    				"token" : "15819588170"
    			}
    		}).then(function(response){
    		    var jsondata  =  JSON.parse(response.data);  
    			for(var i = 0;i < jsondata.length; i++ ){
    				//this.td.push( response.data.td[k] );
    				this.li.push(jsondata[i]);
    			}
    		},function(response){
    			alert("2")
    		});
    	},
    	httpky : function(){
    		this.$http({
    		    url: "http://www.liubf.com/demo/Bang/post_jsonp2.php",
    			method : "jsonp",
    			params : {  //发送参数 带尾巴 适合 get jsonp
    				 loginuser : "vue-rescource",
    				 loginpass: "JSONP"
    			}
    		}).then(function(response){
    			  alert("vue-rescource" +  response.bodyText );
    		},function(response){
    			 alert("失败" + response.status);
    		});
    	},	
    	httpky2 : function(){
    	    //Vue.http.options.emulateJSON = true;	  //全局开启 post方式必须开启cont-type
       		this.$http({ 
       		  url: "http://www.liubf.com/demo/Bang/post_jsonp.php",
    		  method : "post",
    		  body : {  //发送参数 不带尾巴 适合post
    			     loginuser : "vue-rescource",
    				 loginpass: "CORS"
    				 },
    		   emulateJSON:true	  //局部开启 post方式必须开启cont-type
       		}).then(function(response){
       			alert("vue-rescource" + response.data);
       		},function(){
       			alert("失败");
       		});
       		
          	 /*this.$http.post("http://www.liubf.com/demo/Bang/post_jsonp.php",{name:'admin',password:'123'}).then(function(response){
       		alert("成功"  +  response.data); 
       	 },function(response){
       		alert("失败" + response); 
       	 });*/
    	},
    	httpky3:function(){
   		 $.ajax({ 
   			 url: "http://www.liubf.com/demo/Bang/post_jsonp2.php",
   			 type: "get",
   			 dataType : "jsonp",
   			 data : {
   				 loginuser : "JQ",
   				 loginpass: "JSONP"
   			 },
   			 success:function(response){
   			   alert("jq" + response.c + "|"  + response.pass +  "|" + response.user );
   			 }
   		 });
   	},
	httpky4:function(){
		 $.ajax({ 
			 url: "http://www.liubf.com/demo/Bang/post_jsonp.php",
			 type: "post",
			 data : {
				 loginuser : "JQ",
				 loginpass: "CORS"
			 },
			 success:function(response){
			   alert("jq" + response);
			 }
		 });
	}
    	
    }
	
	 
	 
 });
</script>
</body>
</html>
